<template>
  <div class="home-page">
    <!-- 用户信息部分 -->
    <div class="user-info">
      <div class="user-info-avatar">
        <img :src="userStore.userInfo.avatar" title="头像">
      </div>
      <div class="user-info-tip">
        <p class="info">{{showTime()}},<span>{{ userStore.userInfo.nickname }}</span></p>
        <p class="title">星辰集市后台管理系统</p>
      </div>
      <!-- 时间、天气信息部分 -->
      <div class="info-other">
        <div class="other-time">
          <span class="time-text">{{ real_time }}</span>
        </div>
        <div class="other-weather">
          <div class="weather-left">
            <span class="left-item">当前位置: {{ weatherInfo.city }}</span>
            <span class="left-item">温度区间: {{ weatherInfo.tem_night +"~"+ weatherInfo.tem_day + "℃"}}</span>
            <span class="left-item">风向情况: {{ weatherInfo.win +" "+ weatherInfo.win_speed }}</span>
            <span class="left-item">空气质量: {{ weatherInfo.air }}</span>
            <span class="left-item">大气压强: {{ weatherInfo.pressure }}</span>
            <span class="left-item">空气湿度: {{ weatherInfo.humidity }}</span>
            <span class="left-item">数据请求次数: {{ weatherInfo.nums }}</span>
          </div>
          <div class="weather-right">
            <img class="right-img" :src="weatherInfo.showImgUrl" alt="">
            <span class="right-info">{{ weatherInfo.wea }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片欢迎部分 -->
    <div class="page-welcome">
      <img src="@/assets/images/home_background.png" alt="星辰集市效果图" title="星辰集市效果图">
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from "vue";
//@ts-ignore引入仓库数据
import useUserStore from "@/store/user.ts";
const userStore = useUserStore();
//引入请求函数
import { reqWeatherInfo } from "@/api/weather/index.ts";
import type { weatherInfoType } from "@/api/weather/index.ts";
//引入工具函数获取时间信息
import { getNowTime } from "@/utils/tools.ts";

//实时时间信息
let real_time = ref("1970年01月01日 00:00:00");
//天气信息
let weatherInfo = reactive<weatherInfoType>({
  nums:0,  //今日实时请求次数
  cityid:0,  //城市id
  city:"未知",  //城市名称
  date:"",  //日期
  week:"",  //星期
  update_time:"",  //更新时间
  wea:"",  //天气情况
  wea_img:"",  //天气标识
  tem:0,  //实况温度
  tem_day:0,  //白天温度
  tem_night:0,  //夜间温度
  win:"未知",  //风向
  win_speed:"",  //风力
  win_meter:"",  //风速
  air:0,  //空气质量
  pressure:0,  //气压
  humidity:"未知" , //湿度
  showImgUrl:"/src/assets/image_weather/qing.png",  //展示本地图片地址
})

//获取天气信息 参考:http://tianqiapi.com/index/doc?version=day
const getWeatherInfo = async () => {
  let res = await reqWeatherInfo();
  weatherInfo.nums = res.data.nums;
  weatherInfo.cityid = res.data.cityid;
  weatherInfo.city = res.data.city;
  weatherInfo.date = res.data.date;
  weatherInfo.week = res.data.week;
  weatherInfo.update_time = res.data.update_time;
  weatherInfo.wea = res.data.wea;
  weatherInfo.wea_img = res.data.wea_img;
  weatherInfo.tem = res.data.tem;
  weatherInfo.tem_day = res.data.tem_day;
  weatherInfo.tem_night = res.data.tem_night;
  weatherInfo.win = res.data.win;
  weatherInfo.win_speed = res.data.win_speed;
  weatherInfo.win_meter = res.data.win_meter;
  weatherInfo.air = res.data.air;
  weatherInfo.pressure = res.data.pressure;
  weatherInfo.humidity = res.data.humidity;
  weatherInfo.showImgUrl = `/src/assets/image_weather/${res.data.wea_img}.png`;
  console.log("天气请求api接口http://v1.yiketianqi.com/free/day?",res);
}

//定时循环请求天气信息 200/24 ~ 8
let timer_weather:any = null;
const circulateReqWeatherInfo = () => {
  if(timer_weather !== null) clearInterval(timer_weather);
  timer_weather = setInterval(() => {
    getWeatherInfo();
  },1000 * 60 * 10)
}

//显示实时时间
let timer_realTime:any = null;
const showRealTime = () => {
  if(timer_realTime !== null) clearInterval(timer_realTime);
  timer_realTime = setInterval(() => {
    real_time.value = getNowTime();
  },1000)
}

//获取时间状态
function showTime():string{
  let msg:string = '';
  let hours:number = new Date().getHours();
  let minutes:number = new Date().getMinutes();
  if(hours >= 0 && (hours < 5 || (hours == 5 && minutes <= 30))){
    msg = "夜深了";
  }else if((hours > 5 || (hours == 5 && minutes > 30)) && hours < 12){
    msg = "上午好";
  }else if(hours >= 12 && (hours < 18 || (hours == 18 && minutes <= 30))){
    msg = "下午好";
  }else if((hours > 18 || (hours == 18 && minutes > 30)) && (hours < 23 || (hours == 23 && minutes <= 30))){
    msg = "晚上好";
  }else if(hours == 23 && minutes > 30){
    msg = "夜深了";
  }
  return msg;
}

//vue生命周期
onMounted(()=>{
  //获取用户信息
  userStore.getUserInfo();
  //获取天气信息
  getWeatherInfo();
  circulateReqWeatherInfo();
  //获取实时时间
  showRealTime();
})
//页面卸载时执行该生命周期
onUnmounted(() => {
  //清除定时器
  clearInterval(timer_weather);
  clearInterval(timer_realTime);
})
</script>

<style lang="scss" scoped>
.home-page{
  //用户信息部分
  .user-info{
    width:100%;
    box-shadow: 2px 2px 15px #708ecf;
    display: flex;

    .user-info-avatar{
      width: 15vh;
      height: 15vh;
      border-radius: 50%;
      margin: 30px;

      img{
        width: 15vh;
        height: 15vh;
        border-radius: 50%;
      }
    }
    .user-info-tip{
      width: 100%;
      height: 100%;

      p{
        margin: 7vh 0;
        cursor: pointer;
        span{
          color:blue;
        }
        &.title{
          font-family:'Courier New', Courier, monospace;
          font-size:16px;
        }
        &.info{
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    .info-other{
      width: 35vw;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      .other-time{
        flex: 1;
        text-align: right;
        .time-text{
          font-size: 12px;
          color: #9195a3;
        }
      }
      .other-weather{
        flex:6;
        padding: 15px;
        box-sizing: border-box;
        display: flex;
        border: 1px dashed #564e4e;
        border-radius: 10px;

        .weather-left{
          flex: 1;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          .left-item{
            font-size: 12px;
            color: #000;
          }
        }
        .weather-right{
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          .right-img{
            width: 90px;
            height: 90px;
          }
          .right-info{
            font-size: 14px;
            font-weight: bold;
            color: #564e4e;
          }
        }
      }
    }
  }
  //图片部分
  .page-welcome{
    width:100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items:center;

    img{
      width: 70%;
      height: 100%;
    }
  }
}

</style>